<template>
  <div class="source">
    <el-form-item :label="title">
      <el-button
        size="mini"
        v-for="item in titleName"
        :key="item.id"
        @click="openDialog(item)"
        >{{ item.label }}
      </el-button>
      <areaDialog
        v-if="lazyLoad == 'false'"
        :formData="formData"
        :params="$attrs"
        :show.sync="show"
        :clickData="clickData"
        @setNewFormData="setNewFormData"
      ></areaDialog>
      <treeLazy
        v-else
        :formData="formData"
        :params="$attrs"
        :show.sync="show"
        :clickData="clickData"
        @setNewFormData="setNewFormData"
      ></treeLazy>
    </el-form-item>
  </div>
</template>

<script>
import areaDialog from '@/components/conditionComponents/areaDialog.vue'
import treeLazy from '@/components/conditionComponents/treeLazy.vue'
export default {
  name: 'chartsSource',
  props: {
    title: {
      type: String,
      default: ''
    },
    titleName: {
      type: Array,
      default: () => {}
    },
    lazyLoad: {
      type: String,
      default: ''
    },
    pageType: {
      type: String,
      default: ''
    },
    formData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      show: false,
      data: this.titleName,
      clickData: {}
    }
  },
  methods: {
    openDialog(data) {
      this.show = true
      this.clickData = { title: data.label, id: data.id }
    },
    setNewFormData(params) {
      this.$emit('setNewFormData', params)
    }
  },
  components: {
    areaDialog,
    treeLazy
  }
}
</script>

<style scoped></style>
